<template>
  <a-modal
    title="查看報價單"
    :width="760"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('cancel') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading" style="padding:15px 25px;">
      <a-form :form="form" v-bind="formLayout">
        <a-row class="form-row" :gutter="48">
          <div v-for="(v, k) in fields" :key="k">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item :label="v.label">
                <template>
                  <span>{{ v.customRender? v.customRender(model[v.key]) : model[v.key] }}</span>
                </template>
              </a-form-item>
            </a-col>
          </div>
        </a-row>
      </a-form>
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="type" slot-scope="type">
          {{ type | typeFilter }}
        </span>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
    import { _getAllQuotationGood } from '@/api/Quotation'

    const columns = [
      {
        title: '貨品名稱',
        dataIndex: 'nameHk'
      },
      {
        title: '貨品編號',
        dataIndex: 'no'
      },
      {
        title: '批次號',
        dataIndex: 'batchNo'
      },
      {
        title: '貨品類別',
        dataIndex: 'categoryName'
      },
      {
        title: '類型',
        dataIndex: 'type',
        scopedSlots: { customRender: 'type' }
      },
      {
        title: '每單位貨品數量',
        dataIndex: 'piecesPerUnit'
      },
      {
        title: '貨品單位',
        dataIndex: 'unit'
      },
      {
        title: '貨品價格',
        dataIndex: 'pricePerUnit'
      },
      {
        title: '折扣',
        dataIndex: 'discount'
      }
    ]

    export default {
        props: {
            visible: {
                type: Boolean,
                required: true
            },
            model: {
                type: Object,
                default: () => null
            }
        },
      components: {
      },
        data () {
            this.formLayout = {
            }
            return {
                form: this.$form.createForm(this),
                fields: [
                  { key: 'supplierName', label: '所屬供應商' },
                  { key: 'no', label: '報價單編號' },
                  { key: 'quotationDate',
                    label: '報價單日期',
                    customRender: (data) => {
                      return this.$options.filters.formatDate(data)
                    }
                  },
                  { key: 'quotationDueDate',
                    label: '過期日',
                    customRender: (data) => {
                      return this.$options.filters.formatDate(data)
                    }
                  },
                  { key: 'remark', label: '備註' },
                  { key: 'pictureUrl',
                    label: '報價單文件',
                    customRender: (data) => {
                      return 'http://127.0.0.1:8080' + data
                    }
                  }
                ],
                loading: false,
                selectList: {
                  supplierList: []
                },
                headers: {
                  authorization: 'authorization-text'
                },
              data: [],
              columns,
              visibleGoods: false,
              mdlGoods: null
            }
        },
        created () {
          this.$watch('model', () => {
            _getAllQuotationGood(this.model.idQuo).then((ret) => {
              this.data = ret.data
            })
          })
        },
        mounted () {
        },
        filters: {
          typeFilter (type) {
            if (type === 0) {
              return '乾貨'
            } else {
              return '蔬菜'
            }
          }
        },
        methods: {
          handleCancel () {
            this.visibleGoods = false
            this.$refs.table.refresh() // 刷新表格
            const form = this.$refs.createModal.form
            form.resetFields() // 清理表单数据（可不做）
            this.data = []
          },
          handleOk (data) {
            // 解釋Goods對象並平鋪

            this.data.push(data)
            this.visibleGoods = false
            const form = this.$refs.createModal.form
            form.resetFields() // 清理表单数据（可不做）
          }
        }
    }
</script>
